<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        position: relative;
        margin: 50px auto;
        width: 600px;
        height: 200px;
        border: 1px solid #000000;
        overflow: hidden;
    }
    .box>ul{
        position: absolute;
        top: 0;
        left: 0;
        width: 300%;
        height: 100%;
        list-style: none;
    }
    .box>ul>li{
        float: left;
    }
    .box>ul>li>img{
        /* 去除垂直空隙 */
          vertical-align:top;
    
    }
</style>
<body>
    
    <div class="box">
        <ul>
            <li><img src="./13无缝滚动/imgs/01.jpg" alt=""></li>
            <li><img src="./13无缝滚动/imgs/02.jpg" alt=""></li>
            <li><img src="./13无缝滚动/imgs/03.jpg" alt=""></li>
            <li><img src="./13无缝滚动/imgs/04.jpg" alt=""></li>
            <!-- 人眼 -->
            <li><img src="./13无缝滚动/imgs/01.jpg" alt=""></li>
            <li><img src="./13无缝滚动/imgs/02.jpg" alt=""></li>
        </ul>
    </div>
</body>
<script>
    window.onload = function(){
        function $(selecter){
            return document.querySelector(selecter);
        }
        var moveVal = 0;
        var timr = null;
        function fn (){
            moveVal-=3
            if(moveVal<= -4 * 300){
                moveVal = 0
            }
            $('ul').style.left = moveVal + 'px'
            
            }

            timr = setInterval(fn,30);


            //鼠标放在大盒子上，动画停止
            $('.box').onmouseover = function(){
                clearInterval(timr);
            }
            $('.box').onmouseout = function(){
                timr = setInterval(fn,30);
        }
    }
</script>
</html>